{% extends 'layout.html' %}

{% block body %}
<style>
del {
	text-decoration: none;
	color: #b30000;
	background: #fadad7;
}
ins {
	background: #eaf2c2;
	color: #406619;
	text-decoration: none;
}

</style>
    <!-- 简介部分 -->
    <div class="flex mb-8 border-b border-gray-400 py-8">
      <div class="mr-6">
        <img src="{{ url_for('static', filename='images/debugger.png')}}" width="80px" alt="">
      </div>
      <div>
        <div class="text-white text-2xl">
          AI 帮你改bug ....
        </div>
        <div class="text-white">
          左侧输入bug代码,右侧会显示正确的代码，底部会显示代码差异部分。
        </div>
      </div>
    </div>

    <!-- 主题内容 -->
    <!-- 切换按钮 -->
    <div id="settings" class="my-4 pl-2">
      <label >选择文件对比类型:</label>
      <label><input type="radio" name="diff_type" value="diffChars" checked> Chars</label>
      <label><input type="radio" name="diff_type" value="diffWords"> Words</label>
      <label><input type="radio" name="diff_type" value="diffLines"> Lines</label>
    </div>
    <div class="flex  h-full max-h-[calc(100%-400px)]">
      <!-- 错误代码区域 -->
      <div class="w-2/5  border-gray-600">
        <form action="" class="w-full h-full">
            <textarea name="error_code" id="a" placeholder="请在这里输入代码"
                      class=" outline-none w-full h-full px-6 bg-primary-100 text-white rounded-lg" ></textarea>
        </form>
      </div>
      <!-- 按钮区域 -->
      <div class="w-1/5  flex flex-col justify-center mx-auto">
        <div class="flex flex-col mx-auto my-2 space-y-4 font-mono text-white text-sm font-bold leading-6 max-w-xs">
          <button type="button" id="run" class="h-12 w-40 bg-indigo-600 items-center text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg">
              Run
          </button>
        </div>
        <div class="flex flex-col mx-auto my-2 space-y-4 font-mono text-white text-sm font-bold leading-6 max-w-xs">
         <button type="button" id="copy" data-clipboard-target="#b" class="h-12 w-40 bg-indigo-600 items-center text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg">Copy</button>
        </div>
        <div class="flex flex-col mx-auto my-2 space-y-4 font-mono text-white text-sm font-bold leading-6 max-w-xs">
          <button type="button" id="clear" class="h-12 w-40 bg-indigo-600 items-center text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg">Clear</button>
         </div>
      </div>
      <!-- 修改后的代码区域 -->
      <div class="w-2/5">
          <div class="w-full h-full">
              <textarea class="outline-none w-full h-full px-6 bg-primary-100 text-white rounded-lg" type="text" 
                        id="b" name="fixed_code"></textarea>
          </div>
      </div>
    </div>
    <!-- 显示对比后的代码内容 -->
    <div class="flex justify-center">
      <div id="result" class="whitespace-pre-wrap my-12 h-[400px] w-[600px] px-6 bg-primary-100 text-white rounded-lg">

      </div>
    </div>

<script>
  // 点击run按钮,提交表单
  $('#run').click(function(){
    if (!$('#a').val()){
      show_error('请填写要修改的代码');
      return false;
    }
    submitQuestion();
  })

  // 点击copy按钮, 复制内容
  $('#copy').click(function(){
    if (!$('#b').val()){
      show_error('没有内容可以复制');
      return false;
    }
    new ClipboardJS('#copy');
    show_info('复制完成');
  })

  // 点击clear按钮, 清除输入框
  $('#clear').click(function(){
    $('#a').val('');
    $('#b').val('');
    $("#result").html('');
  })
  // ajax异步提交
  function submitQuestion(){
    $('#b').val('正在查询请稍等......')
    var question = $('#a').val();
    $.ajax({
        url: '/debug',
        type: 'post',
        data: {'query': question},
        dataType: 'json',
        success: function(res){
            $("#b").val(res.content);
            changed();
        },
        error:function (res) {
            console.log(res);
            console.log('error')
        }
    })
  }
</script>

<script>
  var a = document.getElementById('a');
  var b = document.getElementById('b');
  var result = document.getElementById('result');

  function changed() {
    var diff = JsDiff[window.diffType](a.value, b.value);
    var fragment = document.createDocumentFragment();
    for (var i=0; i < diff.length; i++) {

      if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
        var swap = diff[i];
        diff[i] = diff[i + 1];
        diff[i + 1] = swap;
      }

      var node;
      if (diff[i].removed) {
        node = document.createElement('del');
        node.appendChild(document.createTextNode(diff[i].value));
      } else if (diff[i].added) {
        node = document.createElement('ins');
        node.appendChild(document.createTextNode(diff[i].value));
      } else {
        node = document.createTextNode(diff[i].value);
      }
      fragment.appendChild(node);
    }
    result.textContent = '';
    result.appendChild(fragment);
  }

  window.onload = function() {
    onDiffTypeChange(document.querySelector('#settings [name="diff_type"]:checked'));
    changed();
  };

  a.onpaste = a.onchange =
  b.onpaste = b.onchange = changed;
  a.oninput = b.oninput = changed;

  function onDiffTypeChange(radio) {
    window.diffType = radio.value;
    document.title = "Diff " + radio.value.slice(4);
  }
</script>

{% endblock %}

